<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="queryCustomerProjectList">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <!-- <el-button type="primary" :icon="CirclePlus" @click="openInsertDialog">创建新订单</el-button> -->
      </template>
      <template #projectName="scope">
        <el-button type="primary" link @click="toProjectDetail(scope.row)"> {{ scope.row.projectName }}</el-button>
      </template>
      <template #createDate="scope">
        {{ scope.row.createDate.replace("T", " ").split(".")[0] }}
      </template>
      <template #previewDate="scope">
        {{ scope.row.previewDate.replace("T", " ").split(".")[0] }}
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="EditPen" @click="openPreviewDialog(scope.row)">审核</el-button>
      </template>
    </ProTable>
    <el-dialog v-model="previewDialogVisible" title="审核项目" width="30%">
      <el-descriptions :border="true">
        <el-descriptions-item label="项目名称">{{ selectedRow?.projectName }}</el-descriptions-item>
        <el-descriptions-item label="项目编号">{{ selectedRow?.projectNumber }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ selectedRow?.remark }}</el-descriptions-item>
        <el-descriptions-item label="客户名称">{{ selectedRow?.customerName }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ selectedRow?.createDate.toString().replace("T", " ").split(".")[0] }}
        </el-descriptions-item>
      </el-descriptions>
      <el-card class="box-card">
        <el-form ref="previewFormRef" :model="previewParam" :rules="previewFRuleForm" label-width="150px" class="demo-ruleForm">
          <el-form-item label="审核选择">
            <el-radio-group v-model="previewParam.projectStatus">
              <el-radio :label="2" :value="2">审核通过</el-radio>
              <el-radio :label="11" :value="11">审核拒绝</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="审核备注" prop="previewRemark">
            <el-input type="textarea" v-model="previewParam.previewFailedReason"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="info" @click="previewDialogVisible = false">取消</el-button>
          <el-button type="success" @click="previewCustomerProject(previewFormRef)">提交审核</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts" name="projectManage">
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import { EditPen } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import ProTable from "@/components/ProTable/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { useRoute } from "vue-router";
import { CustomerProjectResult, EditCustomerProjectStatusParam } from "@/api/interface/customerProject";
import { editCustomerProjectStatus, queryCustomerProjectList } from "@/api/modules/customerProject";
import { customerProjectStatusEnum, statusFieldNames } from "@/enums/httpEnum";

const router = useRouter();

const proTable = ref<ProTableInstance>();

/** 表格配置项 */
const columns = reactive<ColumnProps<CustomerProjectResult>[]>([
  { type: "selection", fixed: "left", width: 70 },
  { type: "index", label: "", width: 80 },
  {
    prop: "projectNumber",
    label: "项目编号",
    width: 150,
    search: { el: "input", tooltip: "请输入项目编号" }
  },
  {
    prop: "projectName",
    label: "项目名称",
    width: 120,
    search: { el: "input", tooltip: "请输入项目名称" }
  },

  {
    prop: "projectStatus",
    label: "项目状态",
    width: 150,
    tag: true,
    enum: customerProjectStatusEnum,
    search: { el: "select", props: { filterable: true } },
    fieldNames: statusFieldNames
  },
  {
    prop: "customerName",
    label: "客户名称",
    width: 150
  },
  {
    prop: "createDate",
    label: "创建时间",
    width: 200
  },
  {
    prop: "createUser",
    label: "创建人",
    width: 120
  },
  {
    prop: "previewDate",
    label: "审核时间",
    width: 200
  },
  {
    prop: "previewUser",
    label: "审核人",
    width: 130
  },

  {
    prop: "previewFailedReason",
    label: "审核原因",
    width: 120
  },
  { prop: "operation", label: "操作", fixed: "right", width: 330 }
]);

const previewDialogVisible = ref(false);

/** 填报订单明细Form表单 */
const previewFormRef = ref<FormInstance>();

/** 填报订单明细Form表单验证规则 */
const previewFRuleForm = reactive<FormRules>({
  previewRemark: [
    {
      validator: (_, value, callback) => {
        if (previewParam.projectStatus === 11 && !value) {
          callback(new Error("审核拒绝时审核原因不能为空"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
});

let previewParam = reactive<EditCustomerProjectStatusParam>({
  projectId: "",
  projectStatus: 0,
  previewFailedReason: ""
});

let selectedRow = ref<CustomerProjectResult | undefined>();

const openPreviewDialog = (param: CustomerProjectResult) => {
  Object.assign(previewParam, param);
  selectedRow.value = param;
  previewDialogVisible.value = true;
};

const previewCustomerProject = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await editCustomerProjectStatus(previewParam);
      previewDialogVisible.value = false;
      proTable.value?.getTableList();
    } else {
      ElMessage.error("请填入必填数据");
    }
  });
};

const toProjectDetail = (param: CustomerProjectResult) => {
  router.push(`/order/myOrder/customersDetail?params=detail-page`);
};
</script>
